import React, { Component } from 'react';
import './List.css'
class List extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            List:[]
        }
    }
    componentDidMount(){
        this.$axios({
            url:"http://127.0.0.1:9115/personalized"
        }).then(res=>{
            
            this.setState(state=>{
                return{
                    List:res.result
                }
            })
            
        })
        
    }
    
    
    render() {
        return (
            <div className="List">
                <h3>推荐歌单</h3>
                <div className="list-nav">
                    {
                        this.state.List.map((item,index)=>
                                <div className="navd" key={index}>
                                    <img src={item.picUrl}/>
                                    <p>{item.name}</p>
                                    <div className="bofang">
                                        <i className="iconfont icon-24gf-headphones"></i> 
                                        {/*把数据转换为万 */}
                                        {item.playCount?<p className="nums">{(Number(item.playCount)/10000).toFixed(0)+'万'}</p>:null }
                                    </div>
                                    
                                </div>
                            )
                            
                        
                    }
                    
                </div>
            </div>
        );
    }
}

export default List;